<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日名句轮换显示</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 1px solid #000;
            background-color: #fff;
            max-width: 90%;
            height: auto;
        }
        #formula {
            margin-top: 20px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            width: 90%;
        }
        #message {
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #ff6347;
            opacity: 0;
            transition: opacity 2s ease-in-out;
            text-align: center;
            width: 90%;
        }
        #quote {
            margin-top: 20px;
            font-size: 18px;
            font-style: italic;
            text-align: center;
            width: 90%;
            color: #333;
        }
        #countdown {
            margin-top: 20px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            width: 90%;
            color: #4CAF50;
        }
        .player-container {
            margin-top: 20px;
            text-align: center;
            width: 90%;
        }
        audio {
            width: 100%;
            display: none;
        }
        .controls {
            margin-top: 10px;
        }
        .progress-container {
            position: relative;
            width: 100%;
            height: 5px;
            background-color: #ddd;
            cursor: pointer;
            margin-top: 10px;
        }
        .progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background-color: #4CAF50;
        }
        .song-title {
            margin-top: 10px;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            width: 90%;
        }
        .time-display {
            margin-top: 5px;
            font-size: 14px;
            text-align: center;
            width: 90%;
        }
        button {
            padding: 10px 20px;
            margin: 0 5px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #4CAF50;
            color: white;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }

        /* 爱心特效样式 */
        .heart {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
            transform: rotate(-45deg);
            pointer-events: none;
            animation: heartEffect 1s ease-out;
        }

        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
        }

        .heart::before {
            top: -10px;
            left: 0;
        }

        .heart::after {
            top: 0;
            left: 10px;
        }

        @keyframes heartEffect {
            0% {
                transform: scale(1) rotate(-45deg);
                opacity: 1;
            }
            100% {
                transform: scale(3) rotate(-45deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <canvas id="heartCanvas"></canvas>
    <div id="formula"></div>
    <div id="message">老乡，加油，累了赶快睡觉哦</div>
    <div id="quote">加载中...</div>
    <div id="countdown">倒计时加载中...</div>

    <div class="player-container">
        <audio id="audioPlayer" controls style="display:none;">
            Your browser does not support the audio element.
        </audio>
        <div class="song-title" id="songTitle">歌曲名称</div>
        <div class="controls">
            <button id="prevBtn">上一首</button>
            <button id="playPauseBtn">播放</button>
            <button id="nextBtn">下一首</button>
        </div>
        <div class="progress-container" id="progressContainer">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        <div class="time-display" id="timeDisplay">00:00 / 00:00</div>
    </div>

    <script>
        const canvas = document.getElementById('heartCanvas');
        const ctx = canvas.getContext('2d');
        const formulaDiv = document.getElementById('formula');
        const messageDiv = document.getElementById('message');
        const quoteDiv = document.getElementById('quote');
        const countdownDiv = document.getElementById('countdown');

        // 设置画布大小
        const scaleFactor = window.innerWidth / 800;
        canvas.width = Math.min(800, window.innerWidth * 0.9);
        canvas.height = 600 * scaleFactor;

        const width = canvas.width;
        const height = canvas.height;
        const scale = 60;
        const centerX = width / 2;
        const centerY = height / 2;

        let dynamicValue = 0; // 用于动态调整心形函数

        // 绘制坐标系
        function drawCoordinateSystem() {
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;

            // X轴
            ctx.beginPath();
            ctx.moveTo(0, centerY);
            ctx.lineTo(width, centerY);
            ctx.stroke();

            // Y轴
            ctx.beginPath();
            ctx.moveTo(centerX, 0);
            ctx.lineTo(centerX, height);
            ctx.stroke();

            // X轴标签
            ctx.font = '12px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('-2', centerX - 2 * scale, centerY + 15);
            ctx.fillText('0', centerX, centerY + 15);
            ctx.fillText('2', centerX + 2 * scale, centerY + 15);

            // Y轴标签
            ctx.textAlign = 'right';
            ctx.fillText('2', centerX - 15, centerY - 2 * scale);
            ctx.fillText('0', centerX - 15, centerY);
            ctx.fillText('-2', centerX - 15, centerY + 2 * scale);
        }

        // 绘制心形函数
        function drawHeart() {
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 2;

            for (let x = -1.8; x <= 1.8; x += 0.01) {
                const sineValue = Math.sin(dynamicValue * Math.PI * x);
                const y = Math.pow(Math.abs(x), 2 / 3) + 0.75 * Math.sqrt(3.3 - x * x) * sineValue;
                const px = centerX + x * scale;
                const py = centerY - y * scale;

                if (x === -1.8) {
                    ctx.moveTo(px, py);
                } else {
                    ctx.lineTo(px, py);
                }
            }

            ctx.stroke();
        }

        // 更新公式显示
        function updateFormula() {
            formulaDiv.textContent = 
                `f(x) = x^(2/3) + 0.75 * sqrt(3.3 - x^2) * sin(${dynamicValue.toFixed(2)}πx)`;
        }

        // 显示消息
        function showMessage() {
            setTimeout(() => {
                messageDiv.style.opacity = 1;
            }, 5000); // 5秒后显示消息
        }

        // 获取每日名句并轮换显示
        async function fetchAndRotateQuotes() {
            try {
                const response = await fetch('https://www.mxnzp.com/api/daily_word/recommend?count=10&app_id=iejnewrrwtmmksi9&app_secret=J9EKoysQdp54lvn1trAomvX1IAygNI6Z');
                const data = await response.json();

                if (data.code === 1) {
                    const quotes = data.data; // 获取名句列表
                    let index = 0;

                    // 每隔5秒切换一条名句
                    setInterval(() => {
                        quoteDiv.textContent = `“${quotes[index].content}”${quotes[index].author ? ` —— ${quotes[index].author}` : ''}`;
                        index = (index + 1) % quotes.length; // 循环显示
                    }, 5000); // 5秒切换一次
                } else {
                    quoteDiv.textContent = '获取名句失败，请稍后再试。';
                }
            } catch (error) {
                console.error('获取名句失败:', error);
                quoteDiv.textContent = '无法加载每日名句，请稍后再试。';
            }
        }

        // 倒计时功能
        function startCountdown(targetDate) {
            function updateCountdown() {
                const now = new Date().getTime();
                const distance = targetDate - now;

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                countdownDiv.textContent = `距离2025年3月15日还有: ${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;

                if (distance < 0) {
                    clearInterval(countdownInterval);
                    countdownDiv.textContent = "倒计时结束！";
                }
            }

            updateCountdown(); // 初始调用以立即显示倒计时
            const countdownInterval = setInterval(updateCountdown, 1000); // 每秒更新一次
        }

        // 音乐播放器功能
        const audioPlayer = document.getElementById('audioPlayer');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
        const songTitle = document.getElementById('songTitle');
        const timeDisplay = document.getElementById('timeDisplay');

        const musicFiles = [
            './music/银河赴约.mp3',
            './music/绊.mp3',
            './music/我喜欢.mp3',
            './music/不怕.mp3',
            './music/Okawari.mp3'
            // 添加更多歌曲路径
        ];
        const songNames = [
            '银河赴约',
            '绊',
            '上海彩虹室内合唱团 - 我喜欢',
            '不怕',
            'Okawari - カノン'
            // 添加更多歌曲名称
        ];
        let currentTrackIndex = 0;

        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
            const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
            return `${mins}:${secs}`;
        }

        function loadTrack(index) {
            audioPlayer.src = musicFiles[index];
            audioPlayer.load();
            audioPlayer.play();
            playPauseBtn.textContent = '暂停';
            songTitle.textContent = songNames[index];
        }

        function updateTimeDisplay() {
            const currentTime = formatTime(audioPlayer.currentTime);
            const duration = formatTime(audioPlayer.duration);
            timeDisplay.textContent = `${currentTime} / ${duration}`;
        }

        audioPlayer.addEventListener('loadedmetadata', () => {
            updateTimeDisplay();
        });

        audioPlayer.addEventListener('timeupdate', () => {
            const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
            progressBar.style.width = `${progress}%`;
            updateTimeDisplay();
        });

        progressContainer.addEventListener('click', (e) => {
            const rect = progressContainer.getBoundingClientRect();
            const offsetX = e.clientX - rect.left;
            const percentage = (offsetX / rect.width) * 100;
            audioPlayer.currentTime = (percentage / 100) * audioPlayer.duration;
        });

        playPauseBtn.addEventListener('click', () => {
            if (audioPlayer.paused || audioPlayer.ended) {
                audioPlayer.play();
                playPauseBtn.textContent = '暂停';
            } else {
                audioPlayer.pause();
                playPauseBtn.textContent = '播放';
            }
        });

        prevBtn.addEventListener('click', () => {
            currentTrackIndex--;
            if (currentTrackIndex < 0) {
                currentTrackIndex = musicFiles.length - 1;
            }
            loadTrack(currentTrackIndex);
        });

        nextBtn.addEventListener('click', () => {
            currentTrackIndex++;
            if (currentTrackIndex >= musicFiles.length) {
                currentTrackIndex = 0;
            }
            loadTrack(currentTrackIndex);
        });

        // 动画函数
        function animate() {
            function step(timestamp) {
                ctx.clearRect(0, 0, width, height);
                drawCoordinateSystem();
                drawHeart();
                updateFormula();

                dynamicValue += 0.01; // 动态调整心形函数
                requestAnimationFrame(step);
            }

            requestAnimationFrame(step);
        }

        // 添加爱心特效
        document.addEventListener('click', function(event) {
            const heart = document.createElement('div');
            heart.classList.add('heart');
            heart.style.left = `${event.clientX - 10}px`; // 调整位置使爱心中心在点击位置
            heart.style.top = `${event.clientY - 10}px`;
            document.body.appendChild(heart);

            // 动画结束后移除爱心元素
            heart.addEventListener('animationend', function() {
                heart.remove();
            });
        });

        // 启动动画、显示消息、获取并轮换名句、启动倒计时、初始化音乐播放器
        animate();
        showMessage();
        fetchAndRotateQuotes();
        startCountdown(new Date("March 15, 2025 23:59:59").getTime());
        loadTrack(currentTrackIndex);
    </script>
</body>
</html>